<template>
  <div class="plug-custom-amap" :style="cssVars">
    <div class="SelectLatLng">
      <el-input disabled class="LatLngInput" v-model="LatLng"></el-input>
      <el-button @click="PullLatLog">确定</el-button>
    </div>
    <div class="map-container" id="container"></div>
    <div class="select-container" v-if="placeSearchAble">
      <input
        class="pac-input"
        id="pacInput"
        ref="pacInput"
        type="text"
        placeholder="请输入关键字"
      />
      <v-btn class="ml-2" small depressed @click="clear">清除</v-btn>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "PlugCustomAmap",
  props: {
    height: {
      // 地图高度
      type: String,
      default: "500px",
    },
    placeSearchAble: {
      // 地点搜索框
      type: Boolean,
      default: false,
    },
    addMarkerAble: {
      // 允许标记
      type: Boolean,
      default: false,
    },
    initGetLatAndLng_: {
      // 允许标记
      type: Boolean,
      default: false,
    },
    zoom: {
      // 地图缩放级别
      type: Number,
      default: 15.5,
    },
    latitude: {
      // 纬度
      type: Number,
      default: 0,
    },
    longitude: {
      // 经度
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 所选经纬度
      LatLng: "",
      newMarker: [this.longitude, this.latitude], // 新标记点
    };
  },
  computed: {
    cssVars() {
      return {
        "--mapHeight": this.height, // 地图高度
      };
    },
    /* 高德地图的key */
    mapKey() {
      return "0ba2408576fa3f7dc06311da2de61b6e"; // 我的项目中在首次加载时调用接口获取的地图的key，然后存入了vuex，然后在这调用
    },
  },
  created() {
    window._AMapSecurityConfig = {
      serviceHost: "ca1d53757ab1ec270138c1643a651e47",
    };
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    this.map.destroy();
    this.map = null;
  },
  methods: {
    /* 初始化标记点 */
    initMarker() {
      const marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [this.longitude, this.latitude],
        offset: new AMap.Pixel(-13, -30),
      });
      marker.setMap(this.map); // 将标记点放置到地图实例上
      this.map.setCenter([this.longitude, this.latitude], true); // 设置地图中心点
    },
    /* 初始化左键添加标记事件 */
    initAddMarker() {
      this.map.on("click", (e) => {
        this.map.clearMap(); // 清理地图上的标记点
        const longitude = e.lnglat.getLng();
        const latitude = e.lnglat.getLat();
        const marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [longitude, latitude],
          offset: new AMap.Pixel(-13, -30),
        });
        marker.setMap(this.map); // 设置最新的标记点
        this.newMarker = [longitude, latitude]; // 将最新标记点保存一下，用于点击确定后，传递给父组件
      });
    },
    // 初始化左键点击获取经纬度事件
    initGetLatAndLng() {
      this.map.on("click", (e) => {
        console.log(e);
        const longitude = e.lnglat.getLng();
        const latitude = e.lnglat.getLat();
        this.LatLng = longitude + "," + latitude;
      });
    },
    /* 搜索框：输入提示后查询 */
    initSearchPlace() {
      const autoOptions = { input: "pacInput" };
      const autoComplete = new AMap.AutoComplete(autoOptions);
      const placeSearch = new AMap.PlaceSearch({ map: this.map }); // 构造地点查询类
      autoComplete.on("select", function (e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name); //关键字查询
      }); // 注册监听，当选中某条记录时会触发
    },
    /* 初始化地图实例 */
    initMap() {
      AMapLoader.load({
        key: this.mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.ToolBar",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let imageLayer = new AMap.ImageLayer({
            // url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
            url: require("@/assets/Home/OIPC1.jpg"),

            bounds: new AMap.Bounds([115.04, 38.54], [115.02, 38.53]),
            zooms: [11, 20],
          });
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: this.zoom, //初始化地图级别
            resizeEnable: true,
            center: [115.03, 38.534], // 初始化地图中心点位置
            layers: [AMap.createDefaultLayer(), imageLayer],
          });
          const scale = new AMap.Scale();
          const toolBar = new AMap.ToolBar();
          this.map.addControl(scale); // 添加比例尺
          this.map.addControl(toolBar); // 添加简单的缩放按钮

          this.placeSearchAble && this.initSearchPlace(); // 如果placeSearchAble为true，则初始化搜索框功能
          this.addMarkerAble && this.initAddMarker(); // 如果addMarkerAble为true，则初始化左键添加标记功能
          this.initGetLatAndLng_ && this.initGetLatAndLng(); // 如果initGetLatAndLng为true，则初始化左键点击获取经纬度方法

          const initMarkerAble = this.latitude > 0 && this.longitude > 0;
          initMarkerAble && this.initMarker(); // 如果props中的longitude、latitude属性有值，则初始化标记点
        })
        .catch((e) => {
          console.log(e);
        });
    },
    /* 点击确认按钮，将标记点的经纬度值传递给父组件 */
    confirm() {
      const longitude = this.newMarker[0];
      const latitude = this.newMarker[1];
      this.$emit("setLongitudeLatitude", { longitude, latitude });
    },
    // 向父组件发送经纬度
    PullLatLog() {
      console.log(123);
      this.$emit("LatLng", this.LatLng);
    },
    /* 清除地图上的标记 */
    clear() {
      this.map && this.map.clearMap(); // 清空标记
      this.$refs.pacInput.value = ""; // 将输入框的关键字清空
      this.newMarker = [0, 0];
    },
  },
};
</script>

<style lang="scss" scoped>
.SelectLatLng {
  position: relative;
  margin-bottom: 5px;
  .LatLngInput {
    width: 3rem;
  }
  .el-button {
    position: absolute;
    right: 0;
  }

  width: 100%;
  justify-content: space-around;
}
.plug-custom-amap {
  position: relative;
  .map-container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: var(--mapHeight);
  }
  .select-container {
    position: absolute;
    top: 5px;
    left: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding: 6px;
    font-size: 14px;
    .pac-input {
      border: 1px solid #ccc;
      width: 350px;
      padding-left: 5px;
    }
  }
  ::v-deep .amap-icon img {
    width: 25px;
    height: 34px;
  }
  ::v-deep .amap-menu-outer {
    padding-left: 0 !important;
  }
}
</style>
